<template>
	<view class="notify">				
		<view class="notify-list" v-if="notifyList.length > 0">
		
			<view v-if="false" class="read" :class="'text-'+themeColor.name">
				<text @tap="clearAll">全部清空</text>
				<text @tap="checkAllRead">全部已读</text>
			</view>
			<view v-for="(item, index) in notifyList" :key="index" class="row" @tap="navTo(item)">
				<!-- 删除按钮 -->
				<view class="menu" :class="'bg-'+themeColor.name" @tap.stop="handleClearNotify(item.id)">
					<i class="iconfont iconiconfontshanchu1"></i>
				</view>
				<!-- 商品 -->
				<view
					class="carrier"
					:class="[
						theIndex === index ? 'open' : oldIndex === index ? 'close' : ''
					]"
					@touchstart="touchStart(index, $event)"
					@touchmove="touchMove(index, $event)"
					@touchend="touchEnd(index, $event)"
				>
					<view class="notify-wrapper">
						<view class="title in1line">{{item.cstmName || item.customName}}</view>
						<view class="content in2line">{{item.callText || item.callContext}}</view>
						<view class="time">{{item.callTime || item.callTime | time}}</view>
						<!-- <uni-tag
								class="type"
								type="error"
								:text=" item | notifyTypeFilter"
								size="small"
								/> -->
						<view class="un-read" :class="'bg-'+themeColor.name" v-if="(item.state === 0 || item.readState === 0)"></view>
					</view>
				</view>
				<!-- <rf-load-more v-if="notifyList.length > 0" :status="loadingType" /> -->
			</view>
		</view>		
		<rf-load-more v-if="notifyList.length > 0" :status="loadingType" />				
		<!--消息为空-->
		<rf-empty
			:bottom="bottom"
			info="您还没有推送消息"
			v-if="notifyList.length === 0 && hasLogin"
		></rf-empty>
		
		<view v-if="!hasLogin" class="notify-empty">
			<text class="iconfont iconxiaoxi-" :class="'text-'+themeColor.name"></text>
			<view class="empty-tips">
				暂未登录
				<view class="navigator" :class="'text-'+themeColor.name" @tap="navToLogin('/pages/public/logintype')"
					>登录/注册 ></view
				>
			</view>
		</view>
	</view>
</template>
<script>
import { notifyIndex,notifyReadAll,getVcareList,checkAllVcare} from '@/api/userInfo'	
import rfLoadMore from '@/components/rf-load-more/rf-load-more';
import moment from '@/common/moment';
import mConstDataConfig from '@/config/constData.config';
import { mapMutations } from 'vuex';
export default {
  components: { rfLoadMore },
	data() {
		return {
			currentCate: 0,
			notifyList: [],
			logo: this.$mSettingConfig.appLogo,
			loadingType: 'more',
			page: 1,
			hasLogin: false,
			loading: true,
			list: [
				{ title: '评论', logo: this.$mSettingConfig.appLogo },
				{ title: '粉丝', logo: this.$mSettingConfig.appLogo },
				{ title: '点赞', logo: this.$mSettingConfig.appLogo }
			],
			// 控制滑动效果
			theIndex: null,
			oldIndex: null,
			userInfo : {},
			msgType : 2,
			type : 'childtx',
			back:true,
		};
	},
	filters: {
		time(val) {
			return val.substring(0,val.length-2);
		},
		notifyTypeFilter(item) {
				if(item.callType === 1)
				 return '腕表';	
				 if(item.callType === 4)
				  return '健康';	
				if(item.callType === 9)				
				 return '围栏';
				if(item.callType === 13)				
				 return '活动';				 
				if(item.callType === 14)				
				 return '用药';					 
				if(item.callType === 15)				
				 return '生日';	
				 
				if(this.type ==='xyaf'){
					if(item.callType === 6)
					 return '烟感';
					else if(item.callType === 7) 
					 return '水浸';
					else if(item.callType === 3) 
					 return '燃气';	
					else if(item.callType === 4) 
					 return '呼叫';	
					else if(item.callType === 21) 
					 return '看护';	
				}										   											   							
		}
	},
	onLoad(options) {
		console.log("options: " + JSON.stringify(options));
		this.msgType = options.msgType;
		this.type = options.type;
	},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo');
		this.initData();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.notifyList.length = 0;
		this.getRemindList('refresh');
	},
	onReachBottom() {
		this.page++;
		this.getRemindList();
	},
	computed: {
		bottom () {
			let bottom = 0;
			/*  #ifdef H5  */
      bottom = 90;
			/*  #endif */
			return bottom;
		}
	},
	methods: {
		...mapMutations(['setNotifyNum']),
		// 数据初始化
		initData() {
			this.hasLogin = this.$mStore.getters.hasLogin;
			this.page = 1;
			this.notifyList = [];
			this.getRemindList();
			this.checkAllRead();
		},
		// 通用跳转
		navToLogin(route) {
			this.$mRouter.push({ route });
		},		
		// 获取消息提醒
		async getRemindList(type) {
			const params = {};
			let corpId = 10;
			if(this.userInfo.corpId)
			   corpId  = this.userInfo.corpId;
			let cstmIds = 0;
			if(this.userInfo && this.userInfo.userId && this.userInfo.cstmIds)
				cstmIds = this.userInfo.userId+','+this.userInfo.cstmIds;
				
			let url = `${notifyIndex}`;							  
			if(this.type ==='xyaf') {
			    url = `${getVcareList}`;
			   params.callType = this.msgType;
			   params.cstmIds = cstmIds;
			   params.page = this.page;								
			}else{
				url = `${notifyIndex}`;
				params.corpId = corpId;
				params.msgType = this.msgType;
				params.cstmIds = cstmIds;
				params.page = this.page;
			}
				
			//console.log("请求参数: " + JSON.stringify(params));	
			await this.$http
				.get(url, params)
				.then(async r => {
					//console.log("消息提醒: " + JSON.stringify(r.data));
					this.loading = false;
					if(type === 'refresh'){
						uni.stopPullDownRefresh();
					}
					this.loadingType = r.data.length == 10 ? 'more' : 'nomore';
					this.notifyList = [...this.notifyList,...r.data];
					
					
				}).catch((e) => {
					this.loading = false;
					if(type === 'refresh'){
						uni.stopPullDownRefresh();
					}
					//console.log("通知错误: " + JSON.stringify(e));
				});
		},
		// 全部已读
		async checkAllRead() {
			const params = {};
			let cstmIds = '0';
			if(this.userInfo && this.userInfo.userId && this.userInfo.cstmIds)
				cstmIds = this.userInfo.userId+','+this.userInfo.cstmIds;
			let url = `${notifyReadAll}`;
			if(this.type === 'xyaf'){
				url = `${checkAllVcare}`;
				params.userType = this.userInfo && this.userInfo.userType;
				params.userId = this.userInfo && this.userInfo.userId;
				params.cstmIds = cstmIds;
				params.callType = this.msgType;
				
			}else{
				url = `${notifyReadAll}`;
				params.userType = this.userInfo && this.userInfo.userType;
				params.userId = this.userInfo && this.userInfo.userId;
				params.cstmIds = cstmIds;
				params.msgType = this.msgType;				
				
			}
				
			await this.$http
				.get(url, params)
				.then(async r => {
					console.log("消息提醒: " + JSON.stringify(r.data));
					//this.notifyList = r.data || [];
				}).catch((e) => {
					//console.log("通知错误: " + JSON.stringify(e));
				});
		},
		// 全部清空
		async clearAll() {
			this.$mHelper.toast('开发中');
			return;
			let corpId = 10;
			if(this.userInfo.corpId)
			   corpId  = this.userInfo.corpId;
			let cstmIds = '0';
			if(this.userInfo && this.userInfo.userId && this.userInfo.cstmIds)
				cstmIds = this.userInfo.userId+','+this.userInfo.cstmIds;
			await this.$http
				.get(`${notifyIndex}`, {
					corpId: corpId,
					msgType : '1',
					cstmIds : cstmIds
				})
				.then(async r => {
					console.log("消息提醒: " + JSON.stringify(r.data));
					this.notifyList = r.data || [];
				}).catch((e) => {
					//console.log("通知错误: " + JSON.stringify(e));
				});
		},
		//touchStart
		async touchStart(){
			
		},
		//touchMove
		async touchMove(){
			
		},
		//touchEnd
		async touchEnd(){
			
		}
		
		
	}
};
</script>
<style lang="scss">
page {
	background-color: $page-color-base;
}

.notify {	
	.header {
		width: 100%;
		padding-left: $font-lg;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		.title {
			font-size: 36upx;
		}
	}
	.place {
		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
	.notify-list {	
		.read {
			text-align: right;
			margin-right: $spacing-base;
			margin-top: $spacing-base;
			margin-bottom: $spacing-sm;
			text {
				margin-left: $spacing-base;
			}
		}
		.row {
			width: calc(94%);
			height: calc(22vw + 40upx);
			margin: 0 auto $spacing-base;
			border-radius: 15upx;
			box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			position: relative;
			overflow: hidden;
			z-index: 4;
			border: 0;
			.menu {
				.iconfont {
					color: #fff;
					font-size: 60upx;
				}
				position: absolute;
				width: 29%;
				height: 100%;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				z-index: 2;
			}
			.carrier {
				@keyframes showMenu {
					0% {
						transform: translateX(0);
					}
					100% {
						transform: translateX(-30%);
					}
				}
				@keyframes closeMenu {
					0% {
						transform: translateX(-30%);
					}
					100% {
						transform: translateX(0);
					}
				}
				&.open {
					animation: showMenu 0.25s linear both;
				}
				&.close {
					animation: closeMenu 0.15s linear both;
				}
				background-color: #fff;
				position: absolute;
				width: 100%;
				padding: 0 0;
				height: 100%;
				z-index: 3;
				display: flex;
				align-items: center;
			}
		}
		.notify-wrapper {
			background-color: $color-white;
			width: 100%;
			padding: $spacing-base $spacing-lg $spacing-base 80upx;
			margin: $spacing-base 0 0;
			border-radius: 15upx;
			position: relative;
			.title {
				font-size: $font-lg;
				color: $font-color-dark;
				font-weight: 500;
				margin: 0 0 $spacing-sm;
			}
			.content {
				font-size: $font-sm;
				color: $font-color-base;
				height: 75upx;
				line-height: 36upx;
			}
			.time {
				font-size: $font-base;
				color: $font-color-light;
			}
			.type {
				position: absolute;
				top: 26upx;
				left: -10upx;
				border: none;
				font-size: $font-sm;
				opacity: 0.8;
			}
			.un-read {
				display: inline-block;
				width: 12upx;
				height: 12upx;
				border-radius: 50%;
				position: absolute;
				top: 32upx;
				right: 30upx;
			}
		}
	}
	.notify-empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;
		.iconfont {
			font-size: $font-lg + 100upx;
		}

		.empty-tips {
			display: flex;
			font-size: $font-sm + 2upx;
			color: $font-color-disabled;

			.navigator {
				margin-left: 16upx;
			}
		}
	}
}
</style>
